<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../showstatic/js/layer-v3.0.3/layer/mobile/need/layer.css" rel="stylesheet" type="text/css" />
    <link href="../showstatic/css/login.css" rel="stylesheet" type="text/css" />



    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" media="all"/>
    <!-- 引入jquery -->
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
</head>
<body>

<header class="header" style="background-color: #4ad3fe">
    <a href="javascript:history.back(-1)" class="fa fa-angle-left" style="color: black"></a>
    <span class="names" style="font-size: 25px">个人中心</span>
</header>

<div class="container">




    <span id="show_name"></span>

    <div >
        <br>
        <div style="float: left">
            <img th:src="@{/image/headimg.svg}" alt="" style="width: 50px;height: 50px">
        </div>

        <div style="float: left;margin-top: 20px;width: 60px; text-align: center"><span id="name">未登录</span></div>

        <div style="float: right">
            <a id="in" class="btn btn-default" href="/movieshow/login.html" role="button" >登录</a>
        </div>
        <div style="float: right">
            <a id="out" class="btn btn-default" href="/login/logout" role="button" >退出</a>
        </div>
    </div>
    <br>
    <br>
    <br>
    <h5 style="font-weight:bold">用户信息:</h5>
    <div style="width: 100%; border-radius: 5px;background-color: #f4f3f2">

        <table class="table table-condensed">
            <tr >
                <td>用户名称:</td>
                <td>
                    <input class="form-control" id="name1" type="text" value="未登录" readonly>
                </td>
            </tr>
            <tr >
                <td>用户电话:</td>
                <td>
                    <input class="form-control" id="tel" type="text" value="未登录" readonly>
                </td>
            </tr>
            <tr >
                <td>用户VIP类型:</td>
                <td>
                    <input class="form-control" id="vip" type="text" value="未办理" readonly>
                </td>
            </tr>
            <tr >
                <td></td>
                <td>
                    <a class="btn btn-default" href="javascript:void(0)" onclick="edit()"  role="button"  >修改名称</a>
                    <a class="btn btn-default" href="javascript:void(0)" id="isOk" role="button" onclick="sendEdit()" >确认修改</a>
                </td>
            </tr>
        </table>
    </div>
</div>
<hr>
<div class="container" >
    <h5 style="font-weight:bold">我的套餐:</h5>
    <div style="width: 100%;height: 30%; border-radius: 5px;background-color: #f4f3f2">
        <br>
        <table style="width: 100%">
            <tr>
                <td>套餐内容:</td>
                <td><input class="form-control" value="未办理" id="vip1" type="text"  readonly></td>
            </tr>
            <tr>
                <td>到期时间:</td>
                <td><input class="form-control" value="未办理" id="endDate" type="text"  readonly></td>
            </tr>
            <tr>
                <td></td>
                <td style="text-align: right">
                    <a class="btn btn-default" href="javascript:void(0)" id="buy_vip" role="button"  >办理套餐</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
        <br>

    </div>
</div>

<hr>
<div class="container">
    <h5 style="font-weight:bold">我的历史:</h5>
    <div>
        <div style="float: right" >
            <a class="btn btn-default" href="javascript:void(0)"  id="order" role="button" >我的订单</a>
        </div>
        <div style="float: right">
            <a class="btn btn-default" href="javascript:void(0)"  id="comment" role="button" >我的评论</a>
        </div>
    </div>
</div>
<div class="container">
    <div style="float: left">
        <a class="btn btn-default" href="javascript:void(0)" id="feedback"  role="button" >反馈</a>
    </div>
</div>

<script th:inline="javascript">
    var url=[[@{/}]]
</script>
<script th:inline="none">
    function edit(){
        $("#name1").removeAttr('readonly')
    }

    function sendEdit(){
        if($("#name1").val() != '未登录'){
            $.ajax({
                url:url+'userinfo/edit',
                data:{'username':$("#name1").val()},
                success:function (result) {
                    if(result){
                        location.reload()
                    }
                }
            })
        }
    }

    $(function () {
        $.ajax({
            url:url+'userinfo/userinfo',
            success:function (info) {
                if (info){
                    $("#in").hide();
                    if(info.usersInfo){

                        $("#tel").attr('value',info.usersInfo.telnumber)

                        if(info.usersInfo.username){
                            $("#name").text(info.usersInfo.username)
                            $("#name1").attr('value',info.usersInfo.username)
                        }else{
                            $("#name").text('游客登陆')
                            $("#name1").attr('value','游客登陆')
                        }

                        $("#buy_vip").attr('href','/movieshow/buy_vip1.html')
                        $("#order").attr('href','/movieshow/userorder.html')
                        $("#comment").attr('href','/comment/findComentByUid')
                        $("#feedback").attr('href','/movieshow/problemFeedback.html')


                    }

                    if(info.userandVip){
                        $("#vip").attr('value',info.userandVip.vname)
                        //套餐是否过期
                        var d1 = new Date();
                        var d2 = new Date(info.userandVip.endDate);
                        //alert(d1.getTime()+'--d1')
                        //alert(d2.getTime()+'--d2')
                        if(d1.getTime()>d2.getTime()){

                            $("#endDate").attr('value','已过期')
                            $("#buy_vip").attr('href','/movieshow/buy_vip1.html')
                        }else{
                            $("#endDate").attr('value',info.userandVip.endDate)
                            $("#buy_vip").hide();
                        }

                        $("#vip1").attr('value','享受'+info.userandVip.vdiscount+'优惠')
                    }



                    console.log(info);
                }else{
                    $("#out").hide();
                    //alert('未登录')
                }
            }
        })
    })
</script>
</body>
</html>